<template>
  <div class="app-container">
    <div>
      <h3 style="text-align: left;">新建居民档案</h3>
    </div>

    <el-form>
      <el-descriptions class="margin-top" title="居民信息" :column="3" border>

        <el-descriptions-item label="姓名" placeholder="请输入">
          <el-input v-model="userDetailVo.name"/>
        </el-descriptions-item>

        <el-descriptions-item label="身份证号" placeholder="请输入">
          <el-input v-model="userDetailVo.code"/>
        </el-descriptions-item>

        <el-descriptions-item label="性别">
          <el-select v-model="userDetailVo.sex" placeholder="请选择">
            <el-option :value="'0'" :label="'男'" />
            <el-option :value="'1'" :label="'女'" />
          </el-select>
        </el-descriptions-item>

        <el-descriptions-item label="出生年月">
          <el-date-picker
            v-model="userDetailVo.birthday"
            type="date"
            placeholder="请选择日期">
          </el-date-picker>
        </el-descriptions-item>

        <el-descriptions-item label="手机号码" placeholder="居民登录账号,请正确填写">
          <el-input v-model="userDetailVo.phone"/>
        </el-descriptions-item>

        <el-descriptions-item label="现 居 地" placeholder="请输入" span="2">
          <el-input v-model="userDetailVo.addressNow"/>
        </el-descriptions-item>

        <el-descriptions-item label="居民标签">
          <el-tag
            v-for="label in userDetailVo.labelList"
            :key="label.id"
            :value="label.id"
            effect="plain">
            {{ label.name }}
          </el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="家庭成员">
          <el-link type="primary">+关联家庭成员</el-link>
        </el-descriptions-item>

        <el-descriptions-item label="登录密码" placeholder="请输入">
          <el-input v-model="userDetailVo.password"/>
        </el-descriptions-item>
      </el-descriptions>

      <hr>
      <el-form-item>
        <el-button type="primary" icon="el-icon-edit" @click="handleAddOrEdit">保存</el-button>

<!--        <el-button type="primary" icon="el-icon-edit" @click="handleAddOrEdit">完善居民档案</el-button>-->
        <el-button type="success" icon="el-icon-edit" @click="handleAddOrEdit">立即签约</el-button>
        <el-button @click="back">返 回</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>
<script>
import user from "../../api/user";
import label from "../../api/admin/label";

  export default {
    data() {
      return {
        userDetailVo: {              //表单数据的绑定模型
          image: ""
        },
        saveBtnDisabled: false, //防止表单重复提交
        labelList: [],                    //标签数组
        props: { multiple: true },        //多选样式
        checked: false,                   //多选框
        aaa: {
          a:['自费']
        },

      }
    },
    created(){
      // 获取路由地址里面的参数
      console.log(this.$route);
      if(this.$route.params && this.$route.params.id){
        // 表示: 路由参数里面有值，并且有id这个值，就是进行修改操作
        console.log("进行修改操作")
        // 需要通过培训师的id去查询培训师的数据
        this.queryById(this.$route.params.id);
      } else {

      }
      this.getLabelList();
    },
    methods: {
      // 根据ID查询用户
      queryById(userId){
        user.queryById(userId).then(res => {
          this.userDetailVo = res.data;
          console.log(res.data);
        });
      },
      //查询所有标签
      getLabelList(){
        label.getAll().then(res => {
          this.labelList = res.data;
        });
      },
      //点击添加按钮
      handleAddOrEdit(){
        // 把saveBtnDisabled 改为true  表示这按钮不可以被点击
        this.saveBtnDisabled = true;

        if(this.$route.params && this.$route.params.id){
          // 修改操作
          user.edit(this.userDetailVo).then(res => {
            // 弹出提示信息
            this.$message.success(res.message);
            // 添加完成，需要跳转到列表页面
            this.$router.push({ path: '/user/list' })
          });
        }else{
          // 增加操作
          //调用新增方法
          user.add(this.userDetailVo).then(res => {
            // 弹出提示信息
            this.$message.success(res.message);
            // 添加完成，需要跳转到详情页面
            this.$router.push({ path: '/user/list' })
          });
        }

        this.saveBtnDisabled = false;

      },
      back(){
        this.$router.push({ path: '/user/list' });
      },

      /**
       * 图片上传成功之后回调该函数
       * @param res   响应回来的数据,通过该对象可以获得响应数据
       * @param file  上传的图片file
       */
      handleAvatarSuccess(res, file) {
        console.log("上传图片响应回来的数据为:" + res.data);
        //this.article.image = "http://rj0158yod.hd-bkt.clouddn.com/" + res;
        console.log("this.user.image = " + this.user.image);
        this.user.image = res.data;
      },

      /**
       * 图片上传之前触发该函数，一般用于图片的大小，后缀等信息的校验
       * @param file    上传的图片file
       * @returns {boolean}
       */
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传图片图片只能是 JPG 或 png 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },

    }
  }
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

